<template>
    <div class="calendar-contain">
        <div v-for="(item, index) in yearCalender" :key="index" class="cal-item">
            <el-calendar v-model="yearCalender[index]"
                         :disabled="true"
                         ></el-calendar>
        </div>
    </div>
</template>

<script>
import moment from 'moment';

export default {
    data() {
      return {
        yearNowTime: new Date().getFullYear(),              // 获取当前年份
        yearCalender: [                                     // 一年的年份列表
            moment().subtract(0, "months"),
            moment().subtract(1, "months"),
            moment().subtract(2, "months"),
            moment().subtract(3, "months"),
            moment().subtract(4, "months"),
            moment().subtract(5, "months"),
            moment().subtract(6, "months"),
            moment().subtract(7, "months"),
            moment().subtract(8, "months"),
            moment().subtract(9, "months"),
            moment().subtract(10, "months"),
            moment().subtract(11, "months")
        ]
      }
    },
}
</script>

<style scoped>
::v-deep .el-calendar__button-group .el-button-group{
    display: none ;
}
::v-deep .el-calendar-table .el-calendar-day {
    padding: 0px !important;
    height: 25px !important;
    line-height: 25px;
    text-align: center;
}
.cal-item{
    width: 25%;
    float: left;
    padding-right: 20px;
}
.calendar-contain .cal-item:nth-child(4n){
    margin-right: 0px;
}
.calendar-contain{
    padding: 0px 20px;
}
::v-deep .el-calendar__body{
    padding: 0px;
}
::v-deep .el-calendar-table__row .current.is-selected{
    background-color: #C80000;
    color: #ffffff;
}
::v-deep .el-calendar-table .el-calendar-day:hover {
    cursor: pointer;
    background-color: #ffffff;
}
::v-deep .el-calendar-table__row .current.is-selected .el-calendar-day:hover{
    background-color: #C80000;
}
::v-deep .next{
    pointer-events:none
}
</style>